
.toaster-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999999;
}
.toaster-item {
    position: relative;
    height: 40px;
    line-height: 40px;
    opacity: 0;
    color: #fff;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    transition: all 150ms linear;
}
.toaster-item:hover {
    opacity: 1;
}
.toaster-item-wait {
    background-color: #030303;
}
.toaster-item-info {
    background-color: #2f96b4;
}
.toaster-item-success {
    background-color: #51a351;
}
.toaster-item-warning {
    background-color: #f89406;
}
.toaster-item-error {
    background-color: #bd362f;
}
.toaster-msg {
    position: relative;
    width: 60%;
    min-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: nowrap;
}
.toaster-icon {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    margin: 8px 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.toaster-icon-wait {
    background-image: url("") !important;
}
.toaster-icon-info {
    background-image: url("") !important;
}
.toaster-icon-success {
    background-image: url("") !important;
}
.toaster-icon-warning {
    background-image: url("") !important;
}
.toaster-icon-error {
    background-image: url("") !important;
}
.toaster-text {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 40px;
}
.toaster-closer {
    position: absolute;   
    top: -2px;
    right: 8px;
    font-size: 32px;
    color: #fff; 
}

.fade {
    animation-name: fade;
    animation-duration: 2s;
    animation-timing-function: linear;
}

.direct {
    opacity: .9;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: .9;
    }
    75% {
        opacity: .9;
    }
    100% {
        opacity: 0;
    }
}